<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>综合能耗</title>
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
<!--  <link rel="stylesheet" href="../../css/swiper.min.css">-->
  <link rel="stylesheet" href="../../css/style.css">
  <style>
    body {
      /*background-color: #0c1021;*/
    }

    .list {
      width: 287px;
      overflow: hidden;
    }

    .list_title {

      height: 40px;
      font-size: 16px;
      font-weight: bold;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      background-color: #125cb7;
    }

    .name {
      width: 65px;
    }

    .month, .year, .all, .done{
      font-size: 18px;
    }
    .month {
      width: 45px;
    }

    .year {
      width: 65px;
    }

    .all {
      width: 45px;
    }

    .done {
      width: 67px;
    }

    .table_list {
      height: 140px;
    }

    .list_item {
      box-sizing: content-box;
      margin-top: 5px;
      display: flex;
      align-items: center;
      height: 52px;
      padding: 5px 0;
      color: #ffffff;
      text-align: center;
      font-size: 16px;
      background-color: rgba(0, 128, 237, 0.18);
    }

    /*.list_item:nth-child(2n-1) {*/
    /*  background-color: rgba(0, 128, 237, 0.18);*/
    /*}*/


  </style>

</head>
<body class="nenghao_page">

<div class="list">
  <div class="list_title fix">
    <div class="title_item name l">名称</div>
    <div class="title_item month l">本月</div>
    <div class="title_item year l">年计划</div>
    <div class="title_item all l">累计</div>
    <div class="title_item done l">完成率</div>
  </div>
  <div class="table_list bd">
    <!--    <div class="list_item fix">-->
    <!--      <div class="item_td name l">电镍综合能耗</div>-->
    <!--      <div class="item_td month l">60</div>-->
    <!--      <div class="item_td year l">400</div>-->
    <!--      <div class="item_td all  l">180</div>-->
    <!--      <div class="item_td done l">80%</div>-->
    <!--    </div>-->
    <!--    <div class="list_item fix">-->
    <!--      <div class="item_td name l">阴极铜综合能耗</div>-->
    <!--      <div class="item_td month l">60</div>-->
    <!--      <div class="item_td year l">400</div>-->
    <!--      <div class="item_td all  l">180</div>-->
    <!--      <div class="item_td done l">80%</div>-->
    <!--    </div>-->
    <!--    <div class="list_item fix">-->
    <!--      <div class="item_td name l">阴极铜综合能耗</div>-->
    <!--      <div class="item_td month l">60</div>-->
    <!--      <div class="item_td year l">400</div>-->
    <!--      <div class="item_td all  l">180</div>-->
    <!--      <div class="item_td done l">80%</div>-->
    <!--    </div>-->
  </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/superslide.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
  $(function () {

    getJson('hxp_scjy_ZHNH.json', {}, function (res) {
      // console.log(res);
      if (res.data && res.data.length) {
        let html = ``;
        for (let i = 0; i < res.data.length; i++) {
          html += `<div class="list_item fix">
      <div class="item_td name l">${res.data[i].typeName}</div>
      <div class="item_td month l">${res.data[i].qty || 0}</div>
      <div class="item_td year l">${res.data[i].annulPlan || 0}</div>
      <div class="item_td all  l">${res.data[i].cumulative || 0}</div>
      <div class="item_td done l">${(res.data[i].finishPlan || 0) + '%'}</div>
    </div>`
        }
        $('.table_list').html(html);
        //   mainCell: ".bd ",
        //   effect: "topLoop",
        //   autoPlay: true,
        //   vis: 2,
        //   scroll: 1,
        //   delayTime: 500,
        // }); $(".list").slide({
        //
      }
    })
  })
</script>
</html>
